import { domElementToImageUrl } from '@/src/utils/utils';
import $ from '@/src/utils/exportWordFileModule/jquery';
import { initExportForJquery } from '@/src/utils/exportWordFileModule/initExportForJquery';
import { HOneHeader, HTwoHeader, Image } from '../Comps/index';

import React from 'react';
import headerDarkBlue from '../../../assets/busi/performanceAnalysis/profitOverview/headerDarkBlue.png';
import { BigEventC, PrimaryC, XYAxisChartsC } from '@/src/comps';
import MyCoverC from '@/src/routes/performanceAnalysis/profitOverview/mycomps/myCover';
import { Table, Divider } from 'antd/es';
import StatisticsCard from '@/src/routes/performanceAnalysis/profitOverview/mycomps/tradeAnalysis/StatisticsCard/StatisticsCard';
import icon1 from '../../../assets/busi/performanceAnalysis/profitOverview/number.png';
import icon2 from '../../../assets/busi/performanceAnalysis/profitOverview/inflow.png';
import icon3 from '../../../assets/busi/performanceAnalysis/profitOverview/outflow.png';

let xAxis4 = [
  '2020-05-06',
  '2020-05-07',
  '2020-05-08',
  '2020-05-11',
  '2020-05-12',
  '2020-05-13',
  '2020-05-14',
  '2020-05-15',
  '2020-05-18',
  '2020-05-19',
  '2020-05-20',
  '2020-05-21',
  '2020-05-22',
  '2020-05-25',
  '2020-05-26',
  '2020-05-27',
  '2020-05-28',
  '2020-05-29',
  '2020-06-01',
  '2020-06-02',
  '2020-06-03',
];
let series4 = [
  {
    data: [
      0.0,
      0.0,
      -0.0032028662939037611,
      null,
      0.0,
      0.0,
      -0.0032372936225315563,
      -0.00048559404337966683,
      -0.0012949174490125559,
      0.0,
      -0.0046706393944273561,
      -0.0070864873570624098,
      -0.0087507381757663261,
      -0.00016105653084230731,
      0.0,
      0.0,
      0.0,
      0.0,
      -0.002180851063829814,
      -0.0096808510638297651,
      -0.0082978723404254495,
    ],
    name: '达尔文博学一号私募基金',
  },
  {
    data: [
      0.0,
      -0.0005630366443015733,
      0.0,
      undefined,
      0.0,
      0.0,
      -0.0036277382447328366,
      -0.0067903818427050844,
      -0.0021394353750987527,
      0.0,
      -0.0016686752572541153,
      -0.0012051543524613795,
      -0.0046352090479279129,
      0.0,
      0.0,
      -0.0041558204320226722,
      -0.0015983924738549593,
      0.0,
      -0.011221152098855214,
      -0.013810648737052622,
      -0.013401780846810873,
    ],
    name: '达尔文明德一号私募基金',
  },
  {
    data: [
      0.0, 0.0, 0.0, 0.0, 0.0, 0.0, -0.0055803571428570953, -0.003292410714285765, -0.013727678571428537, -0.009151785714285654, -0.010379464285714235, -0.014676339285714324,
      -0.019866071428571441, -0.017243303571428559, -0.011774553571428648, -0.018415178571428603, -0.018694196428571508, -0.014955357142857117, -0.020089285714285698,
      -0.021930803571428625, -0.018750000000000044,
    ],
    name: '达尔文至诚一号私募基金',
  },
];

let series7 = [
  {
    name: '资产1',
    data: [
      {
        value: 0.34,
        itemStyle: {
          opacity: 0.5,
        },
      },
      0.32,
      0.71,
      1.51,
      3.12,
      4.51,
      0.13,
      0.27,
      1.25,
      3.22,
      4.25,
      0.23,
      0.27,
      // 1.25,3.22,4.25,0.23,0.27,1.25,3.22,
      // 5.12
    ],
  },
];
let xAxis7 = [
  '产品1',
  '产品2',
  '产品3',
  '产品4',
  '产品5',
  '产品6',
  '产品7',
  '产品8',
  '产品9',
  '产品10',
  '产品11',
  '产品12',
  '产品13',
  // '产品14','产品15','产品16','产品17','产品18','产品19','产品20',
  // '产品产品产品21'
];
let series1 = [
  {
    name: '七日年化收益率',
    data: [
      { value: 11, event: '成立以来创新高', date: '2020-01-05' },
      { value: -8, event: '成立以来创新低', date: '2020-05-21' },
    ],
  },
  {
    name: '资产份额',
    data: [
      { value: 8, event: '近六个月增长超30%', date: '2020-04-28' },
      { value: -9, event: '近1年下降超30%', date: '2020-02-28' },
    ],
  },
  {
    name: '资产净值',
    data: [
      { value: 7, event: '首次超过10亿', date: '2020-01-01' },
      { value: 9, event: '创新高', date: '2020-01-05' },
      { value: -10, event: '创新低', date: '2020-05-21' },
    ],
  },
  {
    name: '分红配送',
    data: [
      { value: 0, event: '分红派息xx元', date: '2020-01-01' },
      { value: 0, event: '分红派息xx元', date: '2020-01-10' },
      { value: 0, event: '分红派息xx元', date: '2020-01-20' },
      { value: 0, event: '分红派息xx元', date: '2020-01-30' },
      { value: 0, event: '分红派息xx元', date: '2020-02-10' },
      { value: 0, event: '分红派息xx元', date: '2020-02-20' },
      { value: 0, event: '分红派息xx元', date: '2020-02-28' },
      { value: 0, event: '分红派息xx元', date: '2020-03-10' },
      { value: 0, event: '分红派息xx元', date: '2020-03-20' },
      { value: 0, event: '分红派息xx元', date: '2020-03-30' },
      { value: 0, event: '分红派息xx元', date: '2020-04-10' },
      { value: 0, event: '分红派息xx元', date: '2020-04-20' },
      { value: 0, event: '分红派息xx元', date: '2020-05-01' },
      { value: 0, event: '分红派息xx元', date: '2020-05-10' },
      { value: 0, event: '分红派息xx元', date: '2020-05-20' },
      { value: 0, event: '分红派息xx元', date: '2020-05-30' },
      { value: 0, event: '分红派息xx元', date: '2020-06-10' },
      { value: 0, event: '分红派息xx元', date: '2020-06-20' },
      { value: 0, event: '分红派息xx元', date: '2020-06-30' },
      { value: 0, event: '分红派息xx元', date: '2020-07-10' },
      { value: 0, event: '分红派息xx元', date: '2020-07-20' },
      { value: 0, event: '分红派息16元', date: '2020-07-30' },
      { value: 0, event: '分红派息12.55元', date: '2020-08-01' },
      { value: 0, event: '分红派息41.23元', date: '2020-08-05' },
      { value: 0, event: '分红派息33.33元', date: '2020-08-10' },
    ],
  },
];
export default class ExportWordTwo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      echartsSrc: undefined,
      coverImg: undefined,
      columns: [
        {
          title: 'Name',
          dataIndex: 'name',
          key: 'name',
          render: (text) => <a>{text}</a>,
        },
        {
          title: 'Age',
          dataIndex: 'age',
          key: 'age',
        },
        {
          title: 'Address',
          dataIndex: 'address',
          key: 'address',
        },
        {
          title: 'Tags',
          key: 'tags',
          dataIndex: 'tags',
        },
        {
          title: 'Action',
          key: 'action',
        },
      ],
      dataSource: [
        {
          key: '1',
          name: 'John Brown',
          age: 32,
          address: 'New York No. 1 Lake Park',
          tags: ['nice', 'developer'],
        },
        {
          key: '2',
          name: 'Jim Green',
          age: 42,
          address: 'London No. 1 Lake Park',
          tags: ['loser'],
        },
        {
          key: '3',
          name: 'Joe Black',
          age: 32,
          address: 'Sidney No. 1 Lake Park',
          tags: ['cool', 'teacher'],
        },
      ],
    };
  }

  initToImg = async () => {
    const coverImg = await domElementToImageUrl(document.getElementById('MyCoverC'), { scale: 1 });
    const TransactionStatisticsImg = await domElementToImageUrl(document.getElementById('TransactionStatistics'), { scale: 1 });
    const headerImg = await domElementToImageUrl(document.getElementById('header'), { scale: 1 });
    setTimeout(() => {
      this.setState({
        coverImg,
        rangeYieldImg: this.echartsRef?.echarts_instance.getDataURL(),
        headerImg,
        echartsTwo: this.echartsRef1?.echarts_instance.getDataURL(),
        echartsThree: this.echartsRef2?.echarts_instance.getDataURL(),
        TransactionStatisticsImg,
      });
    }, 500);
  };
  componentDidMount() {
    initExportForJquery();
    this.initToImg();
  }

  handleDown = () => {
    const data = {
      fileName: '绩效分析报告', //文档名
      fileType: '.doc', //文档类型 type为"application/msword;charset=utf-8"时必须doc 如果需要使用docx需要修改为对应mime类型
      isHeader: true, //是否显示页眉  *xls  不要设置页眉页脚  改为false
      isFooter: true, //是否显示页脚  *xls  不要设置页眉页脚  改为false
      header: `我是页眉`, //页眉标题
      footer: '我是页脚', //页脚标题
      //要导出的内容style, 模板字符串内css`.demo{margin: 0}`
      styles: `#tableExport table{
              width: 100%;
              color: #00A62F;
              height: 40px;
              line-height: 2;
              padding: 10px;
           }
           `,
      // updateExportCss: ``//需要修改导出的word样式  宽度高度 margin之类的
    };
    // 导出获取dom对象调用wordExport方法
    $('#demotest')?.wordExport(data);
  };

  /**
   * 导出模板： 只在开发时显示供开发对比，不展示在页面时设置display: 'none' 一张完整word画布 width="555px" height="930px"
   * @returns {JSX.Element}
   */
  modelHtmlRender = () => {
    const { coverImg, rangeYieldImg, headerImg, echartsTwo, echartsThree, TransactionStatisticsImg } = this.state;
    return (
      <div id='demotest' style={{ margin: '0 auto', padding: '0', minWidth: 555, width: 555, display: 'none' }}>
        <Image src={headerImg} width={555} height={25} />
        <Image src={coverImg} width={555} height={899} />
        <HOneHeader label={'收益率表现'} />
        <HTwoHeader label={'区间收益率'} />
        <Image src={rangeYieldImg} width={555} height={271} />
        <HTwoHeader label={'收益率趋势'} />
        <Image src={echartsTwo} width={555} height={271} />
        <HOneHeader label={'基本信息'} />
        <div align={'center'}>
          <Table id={'tableExport'} columns={this.state.columns} dataSource={this.state.dataSource} pagination={false} />
        </div>
        <HOneHeader label={'净值分析'} />
        <HTwoHeader label={'大事记时间线'} />
        <Image src={echartsThree} width={555} height={335} />
        <HOneHeader label={'交易分析'} InsertPagination={true} />
        <HTwoHeader label={'交易统计'} />
        <Image src={TransactionStatisticsImg} width={555} height={40} />
      </div>
    );
  };

  render() {
    return (
      <>
        <PrimaryC title={'下载'} onClick={this.handleDown}></PrimaryC>
        {this.modelHtmlRender()}
        <div style={{ minWidth: 550, margin: '0 auto', width: 819 }}>
          <Divider plain>
            <div style={{ color: 'red' }}>上面是model渲染html只在开发显示</div>
          </Divider>
          <Divider plain>
            <div style={{ color: 'red' }}>上面即导出的格式</div>
          </Divider>
          <Divider plain>
            <div style={{ color: 'red' }}>下面是渲染的是供展示用 和导出的model无关</div>
          </Divider>

          <div style={{ overflow: 'hidden' }}>
            {/*头*/}
            <div style={{ position: 'relative' }} id={'header'}>
              <img src={headerDarkBlue} alt='' />
              <span style={{ position: 'absolute', inset: '5px 90px', fontSize: '18px', fontWeight: 600, fontFamily: 'PingFangSC-Semibold,PingFang SC' }}>绩效分析报告</span>
            </div>
            {/*封面*/}
            <MyCoverC searchData={{ endDate: '2023-01-17', beginDate: '2022-10-17', portfolioName: '蒙' }} />
            {/*第一个*/}
            <HOneHeader label={'收益率表现'} />
            <HTwoHeader label={'区间收益率'} />
            <XYAxisChartsC
              ref={(ref) => (this.echartsRef = ref)}
              series={series4}
              xAxis={xAxis4}
              height={400}
              toolTipDataFormat={[(value) => value + '万元', (value) => value + '%']}
              hasYAxisPosi={true}
              title={'123'}
              percentStyle={[true]}
            />
            {/*第二个*/}
            <HTwoHeader label={'收益率趋势'} />
            <XYAxisChartsC
              ref={(ref) => (this.echartsRef1 = ref)}
              series={series7}
              xAxis={xAxis7}
              height={280}
              width={920}
              type='bar'
              isAbbreviate={true}
              seriesLabelDataFormat={[(params) => (params.data.value ? params.data.value + '%' : params.data + '%')]}
            />
            {/*第三个*/}
            <HOneHeader label={'基本信息'} />
            <div align={'center'}>
              <Table id={'tableExport'} columns={this.state.columns} dataSource={this.state.dataSource} pagination={false} />
            </div>
            {/*第四个*/}
            <HOneHeader label={'净值分析'} />
            <HTwoHeader label={'大事记时间线'} />
            <BigEventC beginDate={'2020-01-01'} endDate={'2020-07-19'} series={series1} height='500px' showBorder={false} ref={(ref) => (this.echartsRef2 = ref)} />
            {/*第五个*/}
            <HOneHeader label={'交易分析'} InsertPagination={true} />
            <HTwoHeader label={'交易统计'} />
            <div style={{ display: 'flex', justifyContent: 'space-between' }} id={'TransactionStatistics'}>
              <div style={{ width: '32.666666%' }}>
                <StatisticsCard icon={icon1} title='交易笔数' number={99 || 0} colorType={'default'} />
              </div>
              <div style={{ width: '32.666666%' }}>
                <StatisticsCard icon={icon2} title='流入笔数' number={76 || 0} colorType={'default'} />
              </div>
              <div style={{ width: '32.666666%' }}>
                <StatisticsCard icon={icon3} title='流出笔数' number={23 || 0} colorType={'default'} />
              </div>
            </div>
          </div>
        </div>
      </>
    );
  }
}
